<div class="main-footer">
  <div class="main-footer__top">
    <div class="lg:w-1/3">
      <%= render partial: "layouts/decidim/footer/main_intro" %>
    </div>
    <div class="lg:w-2/3 grid grid-cols-1 gap-x-4 gap-y-10 lg:grid-cols-4 text-md text-white">
      <%= render partial: "layouts/decidim/footer/main_links" %>
    </div>
  </div>
  <div class="main-footer__down">
    <nav class="md:w-1/2 lg:w-auto" role="navigation" aria-label="Legal">
      <%= render partial: "layouts/decidim/footer/main_legal" %>
    </nav>
    <nav class="w-full md:w-auto md:ml-auto" role="navigation" aria-label="<%= t("layouts.decidim.footer.social_media") %>">
      <%= render partial: "layouts/decidim/footer/main_social_media_links" %>
    </nav>
  </div>
</div>
